Estos dos operadores se utilizan cuando un objeto puede estar apuntando hacia null o ser undefined de manera que al intentar acceder a los atributos se producirá un error indicando que no se puede leer la propiedad en cuestion, ya que no podemos leer una propiedad de un objeto null o undefined
En el siguiente ejemplo tenemos un caso de objeto null:
export interface Apellidos{
primero : string;
segundo: string ;
}
export interface NombreCompleto{
nombre : string;
apellidos: Apellidos | null;
}
class Gente{
public persona :NombreCompleto = {nombre:"hola", apellidos:null};
escribirNombre(){
console.log(this.persona.apellidos.primero);
}
}
let nuevaPersona = new Gente();
nuevaPersona.escribirNombre();
Este es uno de esos casos en los que podemos usar tanto el operador !. como el operador ?.
¿Cuando usar uno u otro?
La diferencia entre los dos operadores es la siguiente:
- !. (non-null Assertion): este operador simplemente le indica a typescript que estamos seguros de que ese objeto NUNCA va a ser undefined o null y por lo tanto nos permite compilar, el problema es que si el objeto finalmente es null o undefined el código lanzará un error.
- ?. (Optional Chaining): este operador comprueba el objeto sobre el que está colocado, si el objeto es null o undefined simplemente se devolverá undefined y no se hará comprobación de si existen los atributos colocados a partir del punto, por lo tanto nunca se producirá un error. Si el objeto no es null se seguirá con la comprobación de los atributos colocados despues del punto
En el ejemplo anterior si compilamos el código tal cual lo tenemos obviamente obtendremos un error de compilación:
Operador !. (non-null Assertion)
Si incluimos el operador !. el código compilará sin problemas, pero al ejecutarlo como hemos forzado que el objeto apellidos sea null pues se producirá un error durante la ejecución del código
Si nos fijamos en el error no aparece el operador !. esto es porque al ejecutar el código estamos ejecutando codigo javascript y no código typescript, este operador simplemente nos permite decirle a typescript que no se tiene por que preocupar de que el objeto vaya a ser null, el problema es que si finalmente es null se produce un error en tiempo de ejecución
Operador ?. (Optional Chaining)
Si incluimos el operador ?. el código compila también sin problemas, y al ejecutar obtenemos el siguiente resultado:
Como podemos ver el código devuelve undefined ya que el objeto lo hemos forzado para que sea null, pero no obtenemos ningún tipo de error durante la ejecución del código